<!--  -->
<template>
  <div class="system-check">
    <div class="modal-icon-wrapper">
      <div class="radar" ref="radar" :class="finish ? 'radar-finish' : ''">
        <div class="radar-dot">
          <i class="radar-dot1"></i>
          <i class="radar-dot2"></i>
          <i class="radar-dot3"></i>
          <i class="radar-dot4"></i>
        </div>
        <div class="radar-inner">
          <div class="radar-inner-inner"></div>
          <div class="check-score" ref="score">
            <span class="score-score">{{ scoreTotal }}</span
            ><span class="score-unit">分</span>
          </div>
        </div>
      </div>
    </div>
    <div class="system-check-wrapper">
      <div id="checkText" ref="checkText" v-show="!finish">
        正在检测{{ text }}...
      </div>
      <div id="checkTextFinish" ref="checkTextFinish" v-show="finish">
        {{ checkTextFinish }}
      </div>

      <ul class="system-check-list">
        <li v-for="(item, index) in checkList" :key="index" :class="item.level">
          <p class="check-name">{{ item.name }}:</p>
          <p class="check-value">{{ item.value }}</p>
          <p class="check-score-num">{{ item.score }}分</p>
        </li>
      </ul>
    </div>
    <div class="modal-btn" @click="systemClose">{{ $t('cmlpanel.stop') }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as anov from 'anov-core'
export default {
  name: 'systemCheck',
  components: {},
  data() {
    return {
      checkList: [],
      text: '',
      scoreTotal: 10,
      checkTextFinish: '系统自检完成',
      finish: false,
      checkItem: {},
      num: 0,
      lowCheckList: [],
      flag: true,
      checkParams: {}
    }
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      this.checkParams = JSON.parse(JSON.stringify(anov.systemCheckServer.defaultParams))
      this.reset()
      this.flag = true
      anov.soundServer.volume({ type: 'bgm', vol: 0.2 })
      anov.soundServer.volume({ type: 'words', vol: 0.2 })
      let _this = this
      this.tl = new TimelineMax({
        autoRemoveChildren: true,
        onStart: function() {}
      })
      let tw1 = TweenMax.to('.system-check', 0.3, { opacity: 1 })
      let tw4 = TweenMax.to('.system-check .modal-icon-wrapper', 0.3, {
        scale: 1,
        opacity: 1,
        ease: Power0.easeInOut
      })
      let tw8 = TweenMax.to('.system-check .system-check-wrapper', 0.3, {
        opacity: 1
      })
      let tw9 = TweenMax.to('.system-check .modal-btn', 0.3, { opacity: 1 })
      this.tl.addLabel('start')
      this.tl
        .add(tw1, 'start+=0')
        .add(tw4, 'start+=0.1')
        .add(tw8, 'start+=.4')
        .add(tw9, 'start+=.4')
      TweenMax.to(_this.$refs['radar'], 1, {
        '--dot1Color': 'rgba(222, 90, 84, .8)',
        '--dot2Color': 'rgba(222, 90, 84, .6)',
        '--dot3Color': 'rgba(222, 90, 84, .3)',
        '--dot4Color': 'rgba(222, 90, 84, .8)',
        '--circleOColor': 'rgba(222, 90, 84, .5)',
        '--circleIColor': 'rgba(222, 90, 84, .8)',
        '--areaColor': 'rgba(222, 90, 84, 1)',
        '--textColor': 'rgba(222, 90, 84, 1)',
        '--lineColor': 'rgba(222, 90, 84, .3)'
      })
      this.getcheckList()
    },
    getcheckList() {
      this
        .checkDisplayEffect()
        .then(res => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkMinFps()
        })
        .then(res => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkVideo()
        })
        .then(res => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkAudio()
        })
        .then(res => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkInnerLine()
        })
        .then(res => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkInnerSpeed()
        })
        .then(res => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkOuterLine()
        })
        .then(res => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkOuterSpeed()
        })
        .then(res => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkFinish()
        })
        .then(res => {
          this.finish = res
          if (!this.flag) {
            return
          }
          if (res) {
            this.checkList = [...this.lowCheckList]
            let len = this.checkList.length
            TweenMax.to('.system-check-list', 0.2, { height: len * 40 })
            let speak = `系统自检已完成，您的得分是${this.scoreTotal}分`
            // for(let i = 0; i < len;i++){
            //     speak += this.checkList[i].name
            // }
            anov.voiceFeedbackServer.speak(speak)
          }
        })
    },
    setCheckList(res) {
      ++this.num
      let _this = this
      if (res) {
        if (this.num > 5) {
          this.checkList.splice(0, 1)
          this.checkList.push(res)
        } else {
          this.checkList.push(res)
          let h = 40 * this.num
          TweenMax.to('.system-check-list', 0.3, { height: h })
        }
        if (res.level == 'low') {
          this.lowCheckList.push(res)
        }
        let soundsId1 = null
        let totalScore = this.scoreTotal + parseFloat(res.score)
        TweenMax.to(this, 0.5, {
          scoreTotal: totalScore,
          roundProps: ['scoreTotal'],
          onStart: () => {
            soundsId1 = anov.soundServer.play({ type: 'number', duration: -1 })
          },
          onComplete: () => {
            anov.soundServer.stop({ type: 'number', id: soundsId1 })
          }
        })
        if (totalScore < 33) {
          TweenMax.to(_this.$refs['radar'], 1, {
            '--dot1Color': 'rgba(222, 90, 84, .8)',
            '--dot2Color': 'rgba(222, 90, 84, .6)',
            '--dot3Color': 'rgba(222, 90, 84, .3)',
            '--dot4Color': 'rgba(222, 90, 84, .8)',
            '--circleOColor': 'rgba(222, 90, 84, .5)',
            '--circleIColor': 'rgba(222, 90, 84, .8)',
            '--areaColor': 'rgba(222, 90, 84, 1)',
            '--textColor': 'rgba(222, 90, 84, 1)',
            '--lineColor': 'rgba(222, 90, 84, .3)'
          })
        } else if (totalScore < 66) {
          TweenMax.to(_this.$refs['radar'], 1, {
            '--dot1Color': 'rgba(240, 163, 13, .8)',
            '--dot2Color': 'rgba(240, 163, 13, .6)',
            '--dot3Color': 'rgba(240, 163, 13, .3)',
            '--dot4Color': 'rgba(240, 163, 13, .8)',
            '--circleOColor': 'rgba(240, 163, 13, .5)',
            '--circleIColor': 'rgba(240, 163, 13, .8)',
            '--areaColor': 'rgba(240, 163, 13, 1)',
            '--textColor': 'rgba(240, 163, 13, 1)',
            '--lineColor': 'rgba(240, 163, 13, .3)'
          })
        } else {
          TweenMax.to(_this.$refs['radar'], 1, {
            '--dot1Color': 'rgba(36, 224, 241, .8)',
            '--dot2Color': 'rgba(36, 224, 241, .6)',
            '--dot3Color': 'rgba(36, 224, 241, .3)',
            '--dot4Color': 'rgba(36, 224, 241, .8)',
            '--circleOColor': 'rgba(36, 224, 241, .5)',
            '--circleIColor': 'rgba(36, 224, 241, .8)',
            '--areaColor': 'rgba(36, 224, 241, 1)',
            '--textColor': 'rgba(36, 224, 241, 1)',
            '--lineColor': 'rgba(36, 224, 241, .3)'
          })
        }
        this.text = res.next
      }
    },
    reset() {
      this.checkList = []
      this.lowCheckList = []
      this.scoreTotal = 0
      this.finish = false
      this.text = ''
      this.num = 0

      TweenMax.set('.system-check', { opacity: 0 })
      TweenMax.set('.system-check .modal-icon-wrapper', {
        scale: 0,
        opacity: 0
      })
      TweenMax.set('.system-check .modal-btn', { opacity: 0 })
      TweenMax.set('.system-check-list', { height: 0 })
    },
    destroy(params) {
      this.flag = false
      this.reset()
      anov.soundServer.volume({ type: 'bgm', vol: 1 })
      anov.soundServer.volume({ type: 'words', vol: 1 })
      anov.systemCheckServer.isSystemCheckOpen = false
      if(typeof params.onClose == "function"){
        params.onClose()
      }
    },
    systemClose() {
      app.modal.destroy({componentsName: 'systemCheck'})
    },
    checkDisplayEffect(){
        //设置显示效果
        this.checkParams.displayEffect.value = parseFloat(anov.envServer.scaleRatio * 100).toFixed(1) + '%'
        this.checkParams.displayEffect.score = (parseFloat(anov.envServer.scaleRatio * this.checkParams.displayEffect.ratio) * 100).toFixed(0)
        let obj = {...this.checkParams.displayEffect}
        obj.next = '性能'
        obj.level = this.getLevel(this.checkParams.displayEffect.score, this.checkParams.displayEffect.ratio)
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(obj)
            }, 2000);
        })
    },
    checkMinFps(){
        this.checkParams.performance.value = anov.envServer.minFps
        if(anov.envServer.minFps > 24){
            this.checkParams.performance.score = (parseFloat(this.checkParams.performance.ratio) * 100).toFixed(0)
        }else {
            this.checkParams.performance.score = (parseFloat((anov.envServer.minFps / 24) * this.checkParams.performance.ratio) * 100).toFixed(0)
        }
        let obj = this.checkParams.performance
        obj.next = '摄像头'
        obj.level = this.getLevel(this.checkParams.performance.score, this.checkParams.performance.ratio)
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(obj)
            }, 2000);
        })
    },
    checkVideo(){
        //设置摄像头
        this.checkParams.video.value = anov.envServer.videoStatus ? '已开启' : '未开启'
        this.checkParams.video.score = anov.envServer.videoStatus ? this.checkParams.video.ratio * 100 : 0
        let obj = this.checkParams.video
        obj.next = '麦克风'
        obj.level = this.getLevel(this.checkParams.video.score, this.checkParams.video.ratio)
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(obj)
            }, 1000);
        })
    },
    checkAudio(){
        //设置麦克风
        this.checkParams.audio.value = anov.envServer.audioStatus ? '已开启' : '未开启'
        this.checkParams.audio.score = anov.envServer.audioStatus ? this.checkParams.audio.ratio * 100 : 0
        let obj = this.checkParams.audio
        obj.next = '内网连接状态'
        obj.level = this.getLevel(this.checkParams.audio.score, this.checkParams.audio.ratio)
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(obj)
            }, 1000);
        })
    },
    checkInnerLine(){
        //设置内网是否 online
        this.checkParams.innerLine.value = anov.envServer.localNetwork.connected ? '已连接' : '未连接'
        this.checkParams.innerLine.score = anov.envServer.localNetwork.connected ? this.checkParams.innerLine.ratio * 100 : 0
        let obj = this.checkParams.innerLine
        obj.next = '内网网速'
        obj.level = this.getLevel(this.checkParams.innerLine.score, this.checkParams.innerLine.ratio)
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(obj)
            }, 1000);
        })
    },
    async checkInnerSpeed(){
        //设置内网网速
        let url = this.checkParams.innerLineSpeed.url
        let obj = {}
        await this.getNetSpeed(url).then(res => {
            if(isNaN(res)){
                res = 0
            }
            this.checkParams.innerLineSpeed.value = res + 'KB/s'
            let level = anov.envServer.getNetLevel(res)
            this.checkParams.innerLineSpeed.score = res ? ((level / 4) * this.checkParams.innerLineSpeed.ratio) * 100 : 0
            obj = this.checkParams.innerLineSpeed
            obj.next = '外网连接状态'
            obj.level = this.getLevel(this.checkParams.innerLineSpeed.score, this.checkParams.innerLineSpeed.ratio)
            
        }).catch(err => {

        })
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(obj)
            }, 3000);
        })
    },
    async checkOuterLine(){
        //设置外网是否 online
        let url = this.checkParams.outerLineSpeed.url
        await this.getNetSpeed(url).then(res => {
            if(isNaN(res)){
                res = 0
            }
            this.checkParams.outerLine.value = res ? '已连接' : '未连接'
            this.checkParams.outerLine.score = res ? this.checkParams.outerLine.ratio * 100 : 0
            this.checkParams.outerLineSpeed.value = res + 'KB/s'
            let level = anov.envServer.getNetLevel(res)
            this.checkParams.outerLineSpeed.score = res ? ((level / 4) * this.checkParams.outerLineSpeed.ratio) * 100 : 0
        }).catch(err => {

        })
        let obj = this.checkParams.outerLine
        obj.next = '外网网速'
        obj.level = this.getLevel(this.checkParams.outerLine.score, this.checkParams.outerLine.ratio)
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(obj)
            }, 1000);
        })
    },
    checkOuterSpeed(){
        //设置外网网速
        let obj = {}
        obj = this.checkParams.outerLineSpeed
        obj.next = '系统自检完成'
        obj.level = this.getLevel(this.checkParams.outerLineSpeed.score, this.checkParams.outerLineSpeed.ratio)
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(obj)
            }, 3000);
        })
    },
    checkFinish(){
        let flag = true
        return new Promise(function(res, rej) {
            setTimeout(function(){
                res(flag)
            }, 2000);
        })
    },
    getNetSpeed(url){
        return new Promise((res, rel) => {
            if(!window.navigator.onLine){
                rel('网络未连接')
            }
            var startTime, endTime, fileSize;
            var xhr = new XMLHttpRequest();
            xhr.timeout = 15000
            xhr.onreadystatechange = () => {
                if(xhr.readyState === 2){
                    startTime = Date.now();
                }
                if (xhr.readyState !== 4) {
                    return 
                }
                if (xhr.status === 0 || xhr.status === 200) {
                    endTime = Date.now();
                    fileSize = xhr.responseText.length;
                    var speed = fileSize  / ((endTime - startTime)/1000) / 1024;
                    res(Math.floor(speed))
                }else {
                    rel('资源请求失败')
                }
            }
            xhr.open("GET", url+ "?id=" + Math.random(), true);
            xhr.send();
        })
    },
    getLevel(score, ratio){
        let low = parseFloat(ratio / 3), high = parseFloat(ratio / 3 * 2);
        let level = ''
        if(score < low){
            level = 'low'
        }else if(score < high){
            level = 'middle'
        }else {
            level = 'high'
        }
        return level
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
@import '../../../css/_lib-variable.scss';
.system-check {
  opacity: 0;
  --dot1Color: 'rgba(36, 224, 241, .8)';
  --dot2Color: 'rgba(36, 224, 241, .6)';
  --dot3Color: 'rgba(36, 224, 241, .3)';
  --dot4Color: 'rgba(36, 224, 241, .8)';
  --circleOColor: 'rgba(36, 224, 241, .5)';
  --circleIColor: 'rgba(36, 224, 241, .8)';
  --areaColor: 'rgba(36, 224, 241, 1)';
  --textColor: 'rgba(36, 224, 241, 1)';
  --lineColor: 'rgba(36, 224, 241, .3)';
  .check-score {
    color: var(--textColor);
  }
  .radar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--circleOColor);
    overflow: hidden;
  }
  .radar:after {
    content: ' ';
    display: block;
    background-image: linear-gradient(
      40deg,
      rgba(0, 255, 51, 0) 30%,
      var(--areaColor) 100%
    );
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: radar-beam 5s infinite;
    animation-timing-function: linear;
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
  }
  .radar-dot1 {
    position: absolute;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--dot1Color);
    border-radius: 50%;
  }
  .radar-dot2 {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 5px;
    height: 5px;
    background: var(--dot2Color);
    border-radius: 50%;
  }
  .radar-dot3 {
    position: absolute;
    top: 25px;
    left: 30px;
    width: 3px;
    height: 3px;
    background: var(--dot3Color);
    border-radius: 50%;
  }
  .radar-dot4 {
    position: absolute;
    top: 25px;
    left: 70px;
    width: 6px;
    height: 6px;
    background: var(--dot4Color);
    border-radius: 50%;
  }
  .radar-inner {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 19px 0 0 19px;
    border: 2px solid var(--circleIColor);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(0, 0, 0, 0) 0,
      rgba(16, 16, 21, 1) 80%
    );
  }
  .radar-inner-inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(
        0deg,
        transparent 15%,
        var(--lineColor) 16%,
        var(--lineColor) 17%,
        transparent 18%,
        transparent 30%,
        var(--lineColor) 31%,
        var(--lineColor) 32%,
        transparent 33%,
        transparent 45%,
        var(--lineColor) 46%,
        var(--lineColor) 47%,
        transparent 48%,
        transparent 60%,
        var(--lineColor) 61%,
        var(--lineColor) 62%,
        transparent 63%,
        transparent 75%,
        var(--lineColor) 76%,
        var(--lineColor) 77%,
        transparent 78%
      ),
      linear-gradient(
        90deg,
        transparent 15%,
        var(--lineColor) 16%,
        var(--lineColor) 17%,
        transparent 18%,
        transparent 30%,
        var(--lineColor) 31%,
        var(--lineColor) 32%,
        transparent 33%,
        transparent 45%,
        var(--lineColor) 46%,
        var(--lineColor) 47%,
        transparent 48%,
        transparent 60%,
        var(--lineColor) 61%,
        var(--lineColor) 62%,
        transparent 63%,
        transparent 75%,
        var(--lineColor) 76%,
        var(--lineColor) 77%,
        transparent 78%
      );
  }
}
#checkText {
  margin-bottom: 20px;
}
#checkTextFinish {
  margin-bottom: 20px;
}
.radar-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  animation: radar-dot 5s 0.7s infinite;
  animation-timing-function: linear;
}

.system-check .radar-finish:after {
  display: none;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.system-check .radar-finish .radar-dot {
  display: none;
  opacity: 0;
}
.check-score {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 90px;
}
.check-score .score-score {
  display: inline-block;
  font-size: 28px;
  font-weight: normal;
  transform: scale(1, 1.2);
}
.check-score .score-unit {
  display: inline-block;
  margin-left: 2px;
  font-size: 18px;
}
.system-check-wrapper {
  margin-top: 50px;
  text-align: center;
}
.system-check-list {
  padding: 0 200px;
  transition: all 0.3s ease-in;
  li {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    .check-name {
      width: 120px;
      margin-right: 20px;
      text-align: right;
    }
    .check-value {
      width: 100px;
      text-align: left;
    }
  }
  li.low {
    .check-value,
    .check-score-num {
      color: rgba(222, 90, 84, 1);
    }
  }
  li.middle {
    .check-value,
    .check-score-num {
      color: rgba(240, 163, 13, 1);
    }
  }
}
@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes radar-dot {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}
</style>
